<template>
    <div class="detail-container">
        <el-steps :active="data.stepData.status" finish-status="success" align-center>
            <el-step title="提交订单" :description="dateFormate(data.stepData.createTime)" />
            <el-step title="支付订单" :description="dateFormate(data.stepData.paymentTime)" />
            <el-step title="平台发货" :description="dateFormate(data.stepData.deliveryTime)" />
            <el-step title="确认收货" :description="dateFormate(data.stepData.receiveTime)" />
            <el-step title="完成评价" :description="dateFormate(data.stepData.commentTime)" />
        </el-steps>
        <el-descriptions :column="1" direction="vertical" border style="margin-top: 20px;">
            <el-descriptions-item label-class-name="my-label" class-name="my-content">
                <template #label>
                    <div style="display: flex;justify-content: space-between;height: 45px;align-items: center;">
                        <div style="color:#f56c6c">
                            <el-icon color="#f56c6c">
                                <WarningFilled />
                            </el-icon>
                            <span style="vertical-align: text-bottom; margin-left: 10px;">当前订单状态:{{
                                statusEnum[data.stepData.status]
                            }}</span>
                        </div>
                        <div>
                            <el-button size="small" @click="del">删除订单</el-button>
                            <el-button size="small" @click="note = true">备注订单</el-button>
                        </div>
                    </div>
                </template>
                <!-- 其他组件 -->
                <OmsBaseInfo :base-info="data.baseInfo" />
                <OmsReceive :receive="data.recevie" />
                <OmsGoodsInfo :goods-info="data.goodsInfo" />
                <OmsAmount :amount="data.amount" />
                <OmsOperate :operations="data.operation" />
            </el-descriptions-item>
        </el-descriptions>
    </div>
    <el-dialog v-model="note" title="备注订单" width="30%">
        <div style="display: flex; justify-content: space-between">
            <p style="width: 100px">操作备注：</p>
            <el-input v-model="textarea" :rows="2" type="textarea" placeholder="请输入内容" />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="note = false" size="large">取消</el-button>
                <el-button type="primary" @click="handleClose" size="large">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import OmsAmount from "../oms/omsDetailPlus/OmsAmount.vue";
import OmsBaseInfo from "../oms/omsDetailPlus/OmsBaseInfo.vue";
import OmsGoodsInfo from "../oms/omsDetailPlus/OmsGoodsInfo.vue";
import OmsOperate from "../oms/omsDetailPlus/OmsOperate.vue";
import OmsReceive from "../oms/omsDetailPlus/OmsReceive.vue";
import * as api from "../../request/api";
import * as dayjs from "dayjs";
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { affixProps, ElMessage, ElMessageBox } from "element-plus";

let route = useRoute()
const textarea = ref("");
let data = reactive({
    // 订单步骤数据
    stepData: {} as any,
    // 基本信息
    baseInfo: {},
    // 收货人信息
    recevie: {},
    // 商品信息
    goodsInfo: [{}] as [{
        productPic: string,
        productName: string,
        productBrand: string,
        productPrice: string,
        // 货号
        productSn: string,
        // 商品属性，json格式，需要转换
        productAttr: string,
        // 数量
        productQuantity: number,
    }],
    // 费用信息
    amount: {} as {
        totalAmount: number;
        freightAmount: number;
        couponAmount: number;
        integrationAmount: number;
        promotionAmount: number;
        discountAmount: number;
    },
    // 操作信息
    operation: []
})

// 订单状态
enum statusEnum {
    "待付款",
    "待发货",
    "已发货",
    "已完成",
    "已关闭"
}
// 获取数据
const getDataAPI = async function () {
    let result = await api.admin.OrderDetailAPI(Number(route.query.id))
    let { createTime, paymentTime, deliveryTime, receiveTime, commentTime, status } = result
    let { orderSn, useIntegration, memberUsername, payType, sourceType, orderType, deliveryCompany, deliverySn, integration, growth, autoConfirmDay, promotionInfo } = result
    let { receiverName, receiverPhone, receiverPostCode, receiverProvince, receiverCity, receiverRegion } = result
    let { totalAmount, freightAmount, couponAmount, integrationAmount, promotionAmount, discountAmount } = result

    // 进度条数据
    data.stepData = { createTime, paymentTime, deliveryTime, receiveTime, commentTime, status }

    // 基本信息数据
    data.baseInfo = { orderSn, useIntegration, memberUsername, payType, sourceType, orderType, deliveryCompany, deliverySn, integration, growth, autoConfirmDay, promotionInfo }

    // 收货人数据
    data.recevie = { receiverName, receiverPhone, receiverPostCode, receiverProvince, receiverCity, receiverRegion }

    // 费用信息数据
    data.amount = { totalAmount, freightAmount, couponAmount, integrationAmount, promotionAmount, discountAmount }

    // 操作记录列表
    data.operation = result.historyList

    // 商品信息列表
    data.goodsInfo = result.orderItemList
}

// 日期格式化
let dateFormate = function (param) {
    return param ? dayjs(param).format('YYYY-MM-DD hh:mm:ss') : ""
}

// 创建时发送
getDataAPI()

// 删除
let del = () => {
    ElMessageBox.confirm("是否要进行该删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            ElMessage({
                type: "success",
                message: "删除成功",
            });
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消删除",
            });
        });
};
// 备注订单
let note = ref(false);
const handleClose = () => {
    ElMessageBox.confirm("是否要备注订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            ElMessage({
                type: "success",
                message: "备注订单成功",
            });
            note.value = false;
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消备注",
            });
        });
};



</script>
<style lang="scss" scoped>
.bread {
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.detail-container {
    width: 1080px;
    padding: 35px 35px 15px;
    margin: 20px auto;
}

.my-label {
    background: var(--el-color-success-light-9);
}

.my-content {
    background: var(--el-color-danger-light-9);
}
</style>